 <!-- 条件筛选 -->
<template>
  <div style="display:flex;align-items: center;margin-left:10px">
    <div style="width:40px" >
      <!-- 只有两条以上才有且或关系 同一级别只能有一个且或关系-->
      <el-radio v-model="radio" label="1">且</el-radio>
      <el-radio v-model="radio" label="2">或</el-radio>
    </div>
    <div style="width:600px;margin:5px">
      <div v-for="(item,index) of 2">
        <el-select size='mini' style="width:120px;" v-model="data.fruitsValues" filterable placeholder="请选择">
            <el-option
              v-for="item in data.fruitsValueOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select size='mini' style="width:120px" v-model="data.sexVal" filterable placeholder="请选择">
              <el-option
                v-for="item in data.sex"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input style="width:120px"
              size="mini"
              placeholder="请输入内容"
              v-model="data.input"
              clearable>
            </el-input>
            <el-select size='mini' style="width:120px" v-model="data.hobbyVal" filterable placeholder="请选择">
              <el-option
                v-for="item in data.hobby"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

          <div  style="width:600px;margin:5px">
            <div v-for="item of 2">
              <el-select size='mini' style="width:120px;height:20px" v-model="data.fruitsValues" filterable placeholder="请选择">
                  <el-option
                    v-for="item in data.fruitsValueOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                  </el-select>
                  <el-select size='mini' style="width:120px" v-model="data.sexVal" filterable placeholder="请选择">
                      <el-option
                        v-for="item in data.sex"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-input style="width:120px"
                      size="mini"
                      placeholder="请输入内容"
                      v-model="data.input"
                      clearable>
                    </el-input>
                    <el-select size='mini' style="width:120px" v-model="data.hobbyVal" filterable placeholder="请选择">
                      <el-option
                        v-for="item in data.hobby"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </div>
            </div>
        </div>
        </div>
        <div style="display:flex;align-items: center;">
          <div style="width:40px">
            <el-radio v-model="radio" label="1">且1</el-radio>
            <el-radio v-model="radio" label="2">或1</el-radio>
          </div>
      </div>
  </div>
</template>
<style lang="less" scoped>
  table thead tr th{
    height: 0;
  }
</style>

<script>
  export default {
    data () {
      return {
        data: {
          radio: '1'
        },
        spanArr: [],
        tableData: [
          {
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }],
        options: [
        {
            id: 1,
            pid: '',
            fruitsName: '水果',
            fruitsValues: null,
            sexVal: null,
            hobbyVal: null,
            input: '245', // 输入框变量
            radio: '1',
            fruitsValueOptions: [
                {
                    value: '1',
                    label: '橙汁'
                },
                {
                    value: '3158',
                    label: '猕猴桃'
                }
            ],
            sex: [
                {
                    value: '1',
                    label: '男'
                },
                {
                    value: '0',
                    label: '女'
                }
            ],
            hobby: [
                  {
                    value: 1,
                    label: '乒乓球'
                  },
                  {
                    value: 2,
                    label: '篮球'
                  },
                  {
                    value: 3,
                    label: '音乐'
                  }
            ]
        }
      ]
      }
    },
    methods: {
       objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 4 === 0) { // 偶数行的时候
            return {
              rowspan: 4, // 合并的行数
              colspan: 1// 合并的列数
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
        // if (columnIndex === 2) {
        //   if(rowIndex % 3 === 0){//第三行
        //     return {
        //       rowspan: 2,//合并的行数
        //       colspan: 1//合并的列数
        //     };
        //   }else{
        //     return {
        //       rowspan: 1,
        //       colspan: 0
        //     };
        //   }
        // }
      }
    }
  }
</script>
<style scoped>
.clear{
  clear: both;
}
</style>
